import React, {useState, useEffect} from 'react';
import {Button, Divider, Modal, Drawer, Descriptions, Space} from 'antd';
import {ColumnsType} from "antd/lib/table";
import styles from './index.module.scss';
import ProTable from "@/components/ProTable";
import {ExclamationCircleOutlined, SyncOutlined} from "@ant-design/icons";
import {IParam} from "@/common/interfaces";
import CreateDictForm from "@/pages/resource/dict/components/CreateDictForm";
import UpdateDictForm from "@/pages/resource/dict/components/UpdateDictForm";
import {apiQueryDict} from "@/common/apis/dict-api";

const {confirm} = Modal;

const TableList: React.FC<any> = () => {

  const [row, setRow] = useState<any>();
  const [stepFormValues, setStepFormValues] = useState({});
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  const [loading, setLoading] = useState<boolean>(false)
  const [createModalVisible, handleModalVisible] = useState<boolean>(false);
  const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);

  const [params, setParams] = useState<IParam>({page: 1, size: 10});
  const [pageResponse, setPageResponse] = useState<any>({pageInfo: {page: 1, size: 10, total: 0}})

  useEffect(() => {
    setLoading(true)
    apiQueryDict({}).then(res => {
      setPageResponse(res)
    }).finally(() => setLoading(false))
  }, [params]);

  const showDeleteConfirm = (ids: number[]) => {
    Modal.confirm({
      title: "确认删除已选中的任务吗？",
      content: '删除的记录不能恢复,请谨慎操作!',
      icon: <ExclamationCircleOutlined/>,
      onOk() {
        // handleRemoveOne(id).then((r) => {
        //   actionRef.current?.reloadAndRest?.();
        // });
      }
    });
  };

  const columns: ColumnsType<any> = [
    {
      title: '标签名',
      key: 'label',
      dataIndex: 'label',
      align: "center",
    },
    {
      title: '数据值',
      key: 'value',
      dataIndex: 'value',
      align: "center",
    },
    {
      title: '类型',
      key: 'type',
      dataIndex: 'type',
      align: "center",
    },
    {
      title: '描述',
      key: 'description',
      dataIndex: 'description',
      align: "center",
    },
    {
      title: '排序',
      key: 'sort',
      dataIndex: 'sort',
      align: "center",
    },
    {
      title: '状态',
      key: 'status',
      dataIndex: 'status',
      align: "center",
    },
    {
      title: '备注',
      key: 'remarks',
      dataIndex: 'remarks',
      align: "center",
    },
    {
      title: '操作',
      key: 'option',
      dataIndex: 'option',
      align: "center",
      render: (_, record) => (
        <>
          <Button
            type="primary"
            size="small"
            onClick={() => {
              handleUpdateModalVisible(true);
              setStepFormValues(record);
            }}
          >
            编辑
          </Button>
          <Divider type="vertical"/>
          <Button
            type="primary"
            danger
            size="small"
            onClick={() => {
              showDeleteConfirm([record.id]);
            }}
          >
            删除
          </Button>
        </>
      ),
    },
  ]

  const renderToolBar = () => (
    <Space size={10}>
      <Button type="primary" onClick={() => handleModalVisible(true)}>
        新增
      </Button>
      <Button
        onClick={() => handleModalVisible(true)}>
        删除
      </Button>
      <Button type="dashed">
        <SyncOutlined/>
      </Button>
      {`共${pageResponse.pageInfo.total}条记录`}
    </Space>
  )

  const rowSelection = {
    selectedRowKeys,
    onChange: (keys: any, selectedRows: any) => {
      setSelectedRowKeys(keys);
    }
  };

  return (
    <ProTable
      pageResponse={pageResponse}
      columns={columns}
      loading={loading}
      rowSelection={rowSelection}
      scroll={{x: 1500}}
      toolBar={renderToolBar()}
    >

      <CreateDictForm
        key={'CreateDictForm'}
        onSubmit={async (value) => {
          // const success = await handleAdd(value);
          handleModalVisible(false);
          setStepFormValues({});
        }}
        onCancel={() => {
          handleModalVisible(false);
          setStepFormValues({});
        }}
        createModalVisible={createModalVisible}
      />

      <UpdateDictForm
        key={'UpdateDictForm'}
        onSubmit={async (value) => {
          // const success = await handleUpdate(value);
          handleUpdateModalVisible(false);
          setStepFormValues({});
        }}
        onCancel={() => {
          handleUpdateModalVisible(false);
          setStepFormValues({});
        }}
        updateModalVisible={updateModalVisible}
        currentData={stepFormValues}
      />

      <Drawer
        width={600}
        visible={!!row}
        onClose={() => {
          setRow(undefined);
        }}
        closable={false}
      >
        {row?.id && (
          <Descriptions title="基本信息" bordered column={2} style={{margin: '20px 0 20px 20px', height: '400px'}}>
            {columns.map((item) => {
              return (
                <Descriptions.Item label={item.key}>
                  {item.key || ''}
                </Descriptions.Item>
              )
            })}
          </Descriptions>
        )}
      </Drawer>
    </ProTable>
  )
}

export default TableList
